<template>
  <div>
    <header class="header">
      <div class="title">
        <router-link to="/me">
          <img src="../assets/images/01_11.png" alt class="img_zuo" />
        </router-link>
        <div>投诉建议</div>
      </div>
    </header>
    <div class="bigbox">
      <div class="boxitem">
        <textarea
          placeholder="请输入内容(100字以内)"
          id="txtbxnr"
          v-model="txtbxnr"
          maxlength="100"
          ref="count"></textarea>
      </div>
      <div class="ly_tc">
        <!-- <img src="./img/ly_dt.gif" /> -->
        <img src="../assets/images/ly_dt.gif" alt />
      </div>

      <div class="yuyin_list">
        <div class="ly_start">
          <span class="ly">
            <img src="../assets/images/mkf.png" />
            <span>按住说话</span>
          </span>
        </div>
        <div class="ly_play" data-url="null">
          <div>
            <span class="ly">
              <img src="../assets/images/play.png" />
              <span class="ly_s">0"</span>
            </span>
            <img class="del_ly" src="../assets/images/delete.png" />
            <img class="zhuan" src="../assets/images/zhuan.png" />
          </div>
        </div>
      </div>

      <div class="submit" @click="submito">提交</div>
    </div>
  </div>
</template>
<script>
import terminal from "../assets/js/terminal";
export default {
  data() {
    return {
      txtbxnr: "",
      fileSize: "",
      userId: "",
      terminal: false
    };
  },
  methods: {
    submito() {
      if (this.txtbxnr == "") {
        return this.$toast("请输入内容!");
      } else {
        this.$toast("提交成功!");
        setTimeout(() => {
          this.$router.push("/me");
        }, 500);
      }

      let that = this;
      let ly_file = $(".ly_play").attr("data-url");
      let second = $(".ly_s").html();
      that.updata_img(ly_file, second);
    },
    updata_img(ly_file, second) {
      let that = this;
    //   plus.nativeUI.showWaiting("正在加载");
      let task = plus.uploader.createUpload(
        that.$global_msg.Url.host + "/hzController/hzInsertComPlain",
        {
          method: "POST",
        },
        function (t, status) {
          // 上传完成
          let res = JSON.parse(t.responseText);
          console.log(res);
          // alert(JSON.stringify(res))
          // alert(status)
          if (status == 200) {
            plus.nativeUI.closeWaiting();
            if (res.code === 0) {
              that.$router.push("/me");
            } else {
              that.$toast("提交失败！");
            }
          }
        }
      );
      task.addFile(ly_file, {
        key: "multipartFile",
      }); //上传的录音文件
      task.addData("personAppId", that.userId + ""); //3.27that改为this
      task.addData("fileSize", that.fileSize + "");
      task.addData("mc", that.txtbxnr + "");
      task.start();
    },
  },
  mounted() {
    this.userId = localStorage.getItem("userId");
    console.log(this.userId);
    let _this = this;
    this.terminal = terminal.terminals().android;
    if (this.terminal !== true) {
      $(".yuyin_list").hide(); //隐藏录音按钮
    }
    this.$yy.ly_fun(
      {
        play_img: require("../assets/images/play.png"),
        playing_img: require("../assets/images/play_dt.gif"),
        _this: this,
      },
      function (res) {
        // alert(JSON.stringify(res))
        // alert(res.length)
        _this.txtbxnr += res;
        _this.fileSize = Number(res.length);
        if (_this.txtbxnr.length >= 100) {
          // _this.txtbxnr=res
          return _this.$toast("文字限制在100字以内!");
          plus.nativeUI.closeWaiting();
        }
      }
    );
  },
};
</script>

<style scoped>
.submit {
  position: absolute;
  bottom: 1rem;
  left: 5%;
  width: 90%;
  height: 1.2rem;
  background-color: #3f68ff;
  color: white;
  text-align: center;
  line-height: 1.2rem;
  border-radius: 0.7rem;
  font-size: 0.407407rem;
}
.boxitem textarea {
  width: 100%;
  padding-top: 0.3704rem;
  height: 3.125rem;
  overflow: hidden;
}
.boxitem {
  /* height: 1.3889rem; */
  padding: 0px 0.3704rem;
  font-size: 0.3889rem;
  border-bottom: 1px solid #ddd;
  overflow: hidden;
}
.head {
  background: url(../assets/images/home_bg.png);
}
/* 语音 */
.yuyin_list {
  width: 100%;
  height: 1.4815rem;
  position: relative;
  display: flex;
  padding: 0.2315rem 0.1111111111111111rem 0.2315rem 0.3704rem;
  word-break: break-all;
  font-size: 0.3888888888888889rem;
  background-color: #fff;
  /* border-bottom: 1Px solid #ddd; */
  box-sizing: border-box;
}

.ly {
  width: 3.0185185185185186rem;
  height: 1rem;
  border: 1px solid #ddd;
  border-radius: 0.1111rem;
  display: flex;
  align-items: center;
  background-color: #fff;
  color: #757575;
  /* justify-content: center; */
}

.ly img {
  width: 0.3704rem;
  height: 0.5rem;
  margin: 0 0.2777777777777778rem;
  /* margin-right: 0.2777777777777778rem; */
}

.ly_play .ly > span {
  float: right;
  /* margin: 0.282222rem 0.9259259259259259rem 0 0; */
}

.ly_start .ly > span {
  float: right;
  /* margin: 0.2037037037037037rem 0.46296296296296297rem 0 0; */
}

.del_ly,
.zhuan {
  width: 0.8518518518518519rem;
  margin: 0.09259259259259259rem 0 0 0.23148148148148148rem;
  height: 0.8518518518518519rem;
}

.ly_tc {
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  height: 3.7037037037037037rem;
  width: 3.7037037037037037rem;
  border-radius: 0.18518518518518517rem;
  text-align: center;
  z-index: 2000;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 0.3888888888888889rem;
  display: none;
}

.ly_tc > img {
  margin: 1rem auto 0 auto;
  width: 1.5rem;
}

.yc {
  display: none;
}

.ly_play > div {
  display: flex;
}

.ly_play {
  display: none;
}
.header {
  height: 1.8519rem;
  background: url(../assets/images/home_bg.png) no-repeat;
  background-size: 100% 100%;
  padding-top: 0.8333rem;
  box-sizing: border-box;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 20;
  font-size: 0.388888rem;
}

.title {
  padding: 0 0.3704rem;
  display: flex;
  align-items: center;
  color: #fff;
}

.title > div {
  width: 100%;
  font-size: 0.4444rem;
  text-align: center;
}

.img_zuo {
  width: 0.2593rem;
  height: 0.463rem;
}
.bigbox {
  margin-top: 2rem;
}
</style>
